<script setup lang="ts">
import { ref } from 'vue';
import concilInfo from './components/concilInfo.vue'


const activeMenu = ref('members');
const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
};
</script>

<template>
  <el-container class="clan-concil-container h-100vh" >
    <!-- 左侧导航栏 -->
     <el-aside width="200px " >
      <el-menu 
        router
        :default-active="$route.path" 
        @select="handleMenuSelect"
        background-color="#f5f4dd"
        text-color="#5a4a3a"
        active-text-color="#964b00"
        class="sidebar-menu"
        h-100vh
      >
        <el-menu-item index="/clanConcil/concilInfo">
          <span>理事会主页</span>
        </el-menu-item>
        <el-menu-item index="/clanConcil/headers">
          <span>现任会长</span>
        </el-menu-item>
        <el-menu-item index="/clanConcil/vip">
          <span>理事会成员</span>
        </el-menu-item>
        <el-menu-item index="/clanConcil/manage">
          <span>家族管理</span>
        </el-menu-item>
      </el-menu>
     </el-aside>

    <!-- 主内容区域 -->
    
      <router-view />
    
  </el-container>
</template>

<style lang="scss" scoped>
.clan-concil-container {
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23deb887' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}



</style>